<template>
  <div>
    <!--退单列表 -->

    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="3">
        <div class="grid-content bg-purple">
          <span style="color:#8492a6; ">退单号</span>
          <el-input
            style="margin-top:5px "
            v-model="Chargeback"
            placeholder="退单号"
          ></el-input>
        </div>
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="3"
        ><div class="grid-content bg-purple">
          <span style="color:#8492a6; ">订单号</span>
          <el-input
            style="margin-top:5px "
            v-model="Order_Num"
            placeholder="订单号"
          ></el-input></div
      ></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="3"
        ><div class="grid-content bg-purple">
          <span style="color:#8492a6; ">退单状态</span>
          <el-select
            style="margin-top:5px "
            v-model="Chargeback_Type"
            placeholder="请选择"
          >
            <el-option
              v-for="item in Chargeback_From"
              :key="item.Time_Value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select></div
      ></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="3" style="margin-left:-5px;"
        ><div class="grid-content bg-purple">
          <el-button
            style="margin-top:23px "
            type="primary"
            icon="el-icon-search"
            >搜索</el-button
          >
        </div></el-col
      >
    </el-row>

    <el-table
      border
      ref="multipleTable"
      :data="Chargeback_tableData"
      tooltip-effect="dark"
      style="width: 100% ; margin:20px 0"
    >
      <el-table-column prop="name" label="退单号" width="120">
      </el-table-column>
      <el-table-column label="订单号" width="120">
        <template slot-scope="scope">
          <!-- <router-link v-bind:to="'/orderDetails/' + scope.row.name">{{
            scope.row.name
          }}</router-link> -->

          <a
            @click="cancelDialog(scope.row)"
            style="color:#409eff;cursor:pointer; box-sizing: border-box;"
            >{{ scope.row.name }}</a
          >
        </template>
      </el-table-column>
      <el-table-column prop="name" label="退单时间" >
      </el-table-column>
      <el-table-column prop="name" label="退单总额" >
      </el-table-column>
      <el-table-column prop="name" label="实退金额">
      </el-table-column>
      <el-table-column prop="date" label="退单状态" >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.date === 0" type="primary">退货申请 </el-tag>
          <el-tag v-else-if="scope.row.date === 1" type="success"
            >退货完成</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.date == 0 ? true : false"
            type="danger"
            size="mini"
            @click="Chargeback_tableData_Audit(scope.$index, scope.row)"
            >退货审核</el-button
          >
          <el-button
            v-if="scope.row.date == 1 ? true : false"
            type="primary"
            size="mini"
            @click="Chargeback_tableData_Particulars(scope.$index, scope.row)"
            >退货详情</el-button
          >
        </template>
      </el-table-column>

      <!-- 点击发货隐藏框 -->
    </el-table>

    <el-dialog title="发货" :visible.sync="Order_tableData_FormVisible">
      <el-form
        :model="Order_tableData_Deliver_form"
        :rules="Order_tableData_Deliver_rules"
        ref="Order_tableData_Deliver_form"
      >
        <el-form-item label="物流公司" label-width="120px" prop="Company">
          <el-select
            v-model="Order_tableData_Deliver_form.Company"
            placeholder="请选择物流公司"
            style="width: 100%;"
          >
            <el-option
              v-for="item in Logistics_Company"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动名称" label-width="120px" prop="Order">
          <el-input
            v-model="Order_tableData_Deliver_form.Order"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Order_tableData_FormVisible = false"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="Order_tableData_submitForm('Order_tableData_Deliver_form')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 分页 -->

    <el-pagination
      @size-change="Order_SizeChange"
      @current-change="Order_CurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],

  data() {
    return {
      // 退单号
      Chargeback: "",
      // 订单号
      Order_Num: "",
      //   退单状态
      Chargeback_Type: "",
      // 退单状态数据
      Chargeback_From: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "退款申请",
        },
        {
          value: "选项3",
          label: "退款成功",
        },
        {
          value: "选项4",
          label: "退款拒绝",
        },
        {
          value: "选项5",
          label: "退货申请",
        },
        {
          value: "选项6",
          label: "退货拒绝",
        },
        {
          value: "选项7",
          label: "退货审核通过等待用户填写物流",
        },
        {
          value: "选项8",
          label: "待商家收货",
        },
        {
          value: "选项9",
          label: "退货完成",
        },
        {
          value: "选项10",
          label: "退货失败",
        },
      ],

      // 退单表单数据
      Chargeback_tableData: [
        {
          date: 0,
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: 1,
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: 1,
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      //   订单号点击跳转
      cancelDialog(val) {
        // console.log(val);
        this.$router.push({ path: `/orderDetails/${val.name}` });
      },

      // 点击发货隐藏框
      Order_tableData_FormVisible: false,
      // 点击发货隐藏框表单数据
      Order_tableData_Deliver_form: {
        Order: "",
        Company: "",
      },
      // 表单校验规则
      Order_tableData_Deliver_rules: {
        Company: [
          { required: true, message: "请选择物流公司", trigger: "change" },
        ],
        Order: [
          { required: true, message: "请输入运单号", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      // 物流公司
      Logistics_Company: [
        {
          id: 1,
          label: "顺丰快递",
          value: "顺丰快递",
        },
        {
          id: 2,
          label: "韵达快运",
          value: "韵达快运",
        },
        {
          id: 3,
          label: "中速快件",
          value: "中速快件",
        },
        {
          id: 4,
          label: "远程物流",
          value: "远程物流",
        },
        {
          id: 5,
          label: "百世汇通",
          value: "百世汇通",
        },
      ],
      // 显示当前分页页数
      currentPage: 1,
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // 点击表单中的退货审核
    Chargeback_tableData_Audit(index, row) {
      console.log(index, row);
      this.$router.push({
        path: `/ChargebackDetails/${row.date}`,
      });
    },
    // 点击表单中的退货详情
    Chargeback_tableData_Particulars(index, row) {
      this.$router.push({
        path: `/ChargebackDetails/${row.date}`,
      });
    },
    // 点击表单中的发货按钮
    Order_tableData_Deliver(index, row) {
      console.log(index, row);
      this.Order_tableData_FormVisible = true;
    },

    // 分页
    Order_SizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    Order_CurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
a:hover {
  display: inline-block;
  border-bottom: 1px solid #409eff;
  padding-bottom: 5px;
}
</style>
